<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: zhangjx
 * @Date: 2023-05-29 14:55:07
 * @LastEditors: uphldjx 1373577124@qq.com
 * @LastEditTime: 2023-08-08 17:22:09
-->
<template>
	<div class="w-100">
		<el-steps :active="active" align-center>
			<el-step v-for="(item, index) in tabConfig" :key="index" :title="item.label" @click="handleCheck(item)" description="" />
		</el-steps>
		<AuthMenu :key="active" :deviceType="active == 1 ? 0 : 1" :roleId="roleId" ref="webMenu" @refresh="onRefresh"></AuthMenu>

		<div class="fc mt10">
			<el-button type="primary" @click="onNextSave"> 保存 </el-button>
			<el-button v-if="active === 1" @click="onRefresh"> 下一步 </el-button>
			<el-button class="ap-btn" type="primary" @click="onBack" v-if="active == 2"> 上一步 </el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import AuthMenu from '../tabForm/AuthMenu/index.vue'

type Props = {
	nowRowData: any,
}
const props = withDefaults(defineProps<Props>(), {})

const active: any = ref(1)
const roleId = ref(props.nowRowData?.roleId)
const webMenu = ref(null)

const tabConfig = [
	{
		label: '配置后台菜单',
		prop: 'base1',
	},
	{
		label: '配置移动端菜单',
		prop: 'base2',
	},
]
const onRefresh = () => {
	if (active.value++ > 2) active.value = 2
}
const onNextSave = () => {
	webMenu.value.updateRoleMenu(roleId.value)
}
const handleCheck = (item) => {
	if (item.prop == 'base2') {
		active.value++
	} else {
		active.value--
	}
}
const onBack = () => {
	active.value--
}
onMounted(() => {
console.log(roleId.value,props.nowRowData,'roleId')
})
</script>

<style scoped></style>
